<template>
  <div>
    <el-pagination
      v-bind="$attrs"
      v-model:page-size="pageConfigs.pageSize"
      :page-sizes="pageConfigs.pageSizes"
      :background="props.background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allToal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { pageProps, mitter } from './props'

const props = defineProps(pageProps)
const emits = defineEmits(mitter)

const pageConfigs = computed(() => props.pageConfig)
const allToal = computed(() => props.total || 0)

const handleSizeChange = (val: number) => {
  emits('size-change', val)
}
const handleCurrentChange = (val: number) => {
  emits('current-change', val)
}

defineOptions({
  name: 'CEPagination'
})
</script>

<style scoped></style>
